<template>
  <div>
    <el-drawer
      @close="handleClose"
      :size="size"
      :modal="modal"
      :title="title"
      :visible="drawer"
      :direction="direction"
      :showClose="showClose"
    >
      <template #title>
        <div class="title-box">
          <div class="left">
            <h1 class="titile">
              <img
                class="icon"
                :src="require('@/wss/assets/image/icon/cardLeft.png')"
                alt=""
              />
              <el-tooltip :content="title" placement="bottom">
                <el-button
                  style="
                    width: 100%;
                    border: unset;
                    background: #fff;

                    text-align: start;
                    padding: 0px;
                    color: #2e3f5e !important;
                  "
                  type="info"
                  >{{ title }}</el-button>
              </el-tooltip>
            </h1>
          </div>
          <!-- 标题右侧的占位 -->
          <slot name="title"></slot>
        </div>
      </template>
      <slot></slot>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
    //  是否需要遮罩层
    modal: {
      type: Boolean,
      default: true,
    },
    // Drawer 打开的方向
    direction: {
      type: String,
      default: "rtl",
    },
    // Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释
    size: {
      type: [Number, String],
      default: "30%",
    },
    // Drawer 的标题，也可通过具名 slot （见下表）传入
    title: {
      type: String,
      default: "默认标题",
    },
    // 是否隐藏关闭按钮
    showClose:{
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  watch: {
    title(val) {
      console.log(val);
    },
  },
  methods: {
    handleClose() {
      this.$emit("eventColse");
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-drawer__wrapper {
  z-index: 9999 !important;
}
::v-deep .el-drawer__header {
  display: flex;
  margin: 0 20px;
  margin-bottom: 10px;
  padding: 0;
  border-bottom: 0.5px solid #dfe4ed;
}
::v-deep .el-drawer__header .el-button--medium {
  font-size: 18px;
  font-weight: bold;
  color: #2e3f5e !important;
}
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .icon {
    width: 7px;
    margin-right: 8px;
  }
  .titile {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
}
.left {
  width: 70%;
  overflow: hidden;
}
</style>